<template>
  <div>
    <top-title/>

    <van-collapse v-model="activeNames">
      <van-collapse-item :title="'未完成 '+ unDones.length " name="1">
        <template v-if="unDones.length">
          <van-cell
          v-for="todo in unDones"
          :key="todo.id">
            <van-checkbox v-model="todo.isDone" icon-size="24px">{{todo.title}}</van-checkbox>
          </van-cell>
        </template>
      </van-collapse-item>

      <van-collapse-item  :title="'已完成 '+ dones.length " name="2">
        <template v-if="dones.length">
          <list-item
          v-for="todo in dones"
          :key="todo.id"
          @toggle="val=>todo.isDone=val"
          :todo="todo"></list-item>
        </template>

      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
import TopTitle from './topTitle.vue'

import { ref, onMounted, computed } from 'vue'
import { useStore } from 'vuex'
export default {
  components: {
    TopTitle
  },
  setup (props, context) {
    const list = ref([])
    const store = useStore()

    const unDones = computed(() => list.value.filter(todo => !todo.isDone))
    const dones = computed(() => list.value.filter(todo => todo.isDone))

    // 获取数据，初始化list数据
    onMounted(async () => {
      try {
        const res = await store.dispatch('getList')
        console.log(res)
        list.value = res
      } catch (error) {
        console.log(error)
      }
    })

    // 添加单个
    const addItem = inputValue => {
      list.value.push(inputValue)
    }

    // 删除单个
    const removeItem = item => {
      const result = confirm('确定要删除此项？')
      if (result) {
        list.value = list.value.filter(val => val !== item)
      }
    }

    // 删除所有
    const removeAll = item => {
      if (confirm('确定要删除全部？')) {
        list.value = []
      }
    }
    const activeNames = ref(['1'])

    return {
      activeNames,
      dones,
      unDones,
      addItem,
      removeItem,
      removeAll
    }
  }

}
</script>

<style>
</style>
